<template>
  <main-nav-bar>
    <template v-slot:center-name>
      <div>个人资料</div>
    </template>
    <template v-slot:home-nav-back>
      <div><i class="iconfont icon-jiantou2"></i></div>
    </template>
  </main-nav-bar>
  <div class="content">
    <div class="info">
      <div class="head_l">头像</div>
      <div class="head_r" @click="getImg">
        <div class="head">
          <img
            :src="headimgurl"
            alt=""
            v-if="
              headimgurl != null && headimgurl != undefined && headimgurl != ''
            "
          />
          <img
            src="https://qnhyd.laigl.com/c58b599284c517f00d202beccd1c704b.png"
            v-else
            alt=""
          />
        </div>
        <div>
          <img
            src="https://qnhyd.laigl.com/2f3876a72e620c4fc9e8d1e0c190f4e8.png"
            alt=""
          />
        </div>
      </div>
      <div class="upimg">
        <input type="file" ref="filElem" @change="upimg" />
      </div>
    </div>

    <div class="info">
      <div class="head_l">昵称</div>
      <div class="head_r">
        <div>
          <input type="text" placeholder="请输入昵称" v-model="name" />
          <!-- <span>&nbsp;&nbsp;&nbsp;&nbsp;赵正典</span> -->
        </div>
      </div>
    </div>

    <div class="info">
      <div class="head_l">手机号</div>
      <div class="head_r">
        <div>
          <input
            type="text"
            :placeholder="(phone = '' ? phone : '请输入电话号码')"
            v-model="phonenu"
          />
        </div>
      </div>
    </div>

    <div class="bt" @click="upUserInfo">
      <span>保存</span>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import MainNavBar from "../../components/content/mainnavbar/MainNavBar.vue";
import { request } from "../../network/request";
export default {
  data() {
    return {
      name: sessionStorage.getItem("nickname"),
      phone: "",
      phonenu: "",
      headimgurl: "",
      uploadimg: "",
      fileinfo: "",
    };
  },
  mounted () {
      this.getUserInfo();
  },
  methods: {
    getImg() {
      this.$refs.filElem.dispatchEvent(new MouseEvent("click"));
    },
    upimg() {
      const inputFile = this.$refs.filElem.files[0];
      this.uploadimg = this.$refs.filElem.files[0];
      if (
        inputFile.type !== "image/jpeg" &&
        inputFile.type !== "image/png" &&
        inputFile.type !== "image/gif"
      ) {
        Toast("前输入有效图片");
        return;
      }
      this.headimgurl = URL.createObjectURL(inputFile);
    },
    async upUserInfo() {
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phonenu)) {
        Toast("手机号码有误，请重填");
        return;
      }
      if (this.uploadimg != "") {
        const formData = new FormData();
        formData.append("avatar", this.uploadimg);
        formData.append("mobile", this.phonenu);
        formData.append("user_nickname", this.name);
        formData.append("openid", sessionStorage.getItem("openid"));
        this.fileinfo = formData;
      } else {
        const file = new FormData();
        file.append("headimgurl", this.headimgurl);
        file.append("mobile", this.phonenu);
        file.append("user_nickname", this.name);
        file.append("openid", sessionStorage.getItem("openid"));
        this.fileinfo = file;
      }
      const res = await request({
        url: "/v1.ucenter/mobile",
        data: this.fileinfo,
      });
      console.log(res);
      if (res.code == 200) {
        Toast(res.msg);
      }
    },
    async getUserInfo() {
      try {
        const res = await request({
          url: "v1.ucenter/getUserInfo",
          data: {
            openid: sessionStorage.getItem("openid"),
          },
        });
        if (res.code == 200) {
          this.nickname = res.data.row.user_nickname;
          this.headimgurl = res.data.row.avatar;
        } else {
          Toast(res.msg);
        }
      } catch (error) {}
    },
  },
  components: {
    MainNavBar,
  },
};
</script>

<style  scoped>
.upimg {
  display: none;
}
.content {
  width: 92.8vw;
  margin: 0 auto;
  padding-top: 13.333vw;
}
.info {
  display: flex;
  align-items: center;
  width: 92.8vw;
  height: 17.6vw;
  border-bottom: solid 0.267vw rgb(229, 229, 229);
}
.head_l {
  flex: 4;
  font-size: 4.267vw;
  font-weight: bold;
}
.head_r {
  flex: 1;
  display: flex;
  text-align: right;
  align-items: center;
  justify-content: right;
  color: #9b9b9b;
  font-size: 4.267vw;
}
.head_r img {
  width: 6.933vw;
}
.head_r input {
  border: none;
  height: 10.067vw;
  text-align: right;
}
.head{
    width: 13.333vw;
  height:13.333vw;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -webkit-appearance: none;
  overflow: hidden;
}
.head img {
  width: 13.333vw;
  height:13.333vw;
  vertical-align: middle;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -webkit-appearance: none;
  overflow: hidden;
}
.bt {
  width: 100%;
  height: 15.467vw;
  text-align: center;
  font-size: 5.333vw;
  line-height: 15.467vw;
  color: #fff;
  background: #6e0802;
  border-radius: 2.667vw;
  margin-top: 80vw;
}
</style>